<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Button Markup Tester</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
	<script src="../../js/jquery.tag.inserter.js"></script>
	<script src="../../js"></script>
<script>
$(document).bind("pagecreate", function() {
	$("#button-apply").bind("vclick", function() {
		var options = {empty: true};

		$("[data-setter]").each(function() {
			var self = $(this),
			    val = ($(this).is("[type='checkbox']") ? $(this).is(":checked") : $(this).val()),
			    key = $("label[for='" + self.attr( "id" ) + "']" ).text().match(/(^[a-z]*)/)[1],
			    apply = $("#button-" + key + "-apply").is(":checked");

			if (apply) {
				options.empty = false;
				options[key] = val;
			}
		});
		if (!options.empty) {
			delete options.empty;
			$("#sample-link").buttonMarkup(options);
			$("#sample-input-button,#sample-button" ).button( "option", options );
		}
	});
});
</script>
<style>
.ui-field-contain {
	margin-top: 0px;
	margin-bottom: 0px;
}
</style>
</head>

<body>
	<div data-role="page">
		<div data-role="header">
			<h1>jQuery Mobile Widget Option Tester</h1>
		</div>
		<div data-role="contents">
			<a id="sample-link" data-role="button">Sample Link</a>
			<input id="sample-input-button" type="button" name="Input Button" value="Sample Input Button"></input>
			<button id="sample-button" name="Button">Sample Button</button>

			<form id="button-settings" name="button-settings" action="#" method="get" style="display: table;">
				<table><tr><td>
					<div data-role="fieldcontain">
						<label for="button-icon">icon</label>
						<input data-setter="true" type="text" id="button-icon"></input>
					</div>
          </td><td>
					<div data-role="fieldcontain">
						<label for="button-icon-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-icon-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
			                        <label for="button-iconpos">iconpos</label>
                        			<input data-setter="true" type="text" id="button-iconpos"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
						<label for="button-iconpos-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-iconpos-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
						<label for="button-theme">theme</label>
						<input data-setter="true" type="text" id="button-theme"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
						<label for="button-theme-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-theme-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
						<label for="button-inline">inline</label>
						<input data-setter="true" type="checkbox" id="button-inline"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
			   			<label for="button-inline-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-inline-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
						<label for="button-shadow">shadow</label>
						<input data-setter="true" type="checkbox" id="button-shadow"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
						<label for="button-shadow-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-shadow-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
						<label for="button-corners">corners</label>
						<input data-setter="true" type="text" id="button-corners"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
						<label for="button-corners-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-corners-apply"></input>
					</div>
				</td></tr><tr><td>
					<div data-role="fieldcontain">
						<label for="button-iconshadow">iconshadow</label>
						<input data-setter="true" type="checkbox" id="button-iconshadow"></input>
					</div>
				</td><td>
					<div data-role="fieldcontain">
						<label for="button-iconshadow-apply">Apply</label>
						<input data-apply="true" type="checkbox" id="button-iconshadow-apply"></input>
					</div>
				</td></tr>
				<tr><td colspan="2">
					<input type="button" name="button-apply" value="Apply" id="button-apply"></input>
				</td></tr></table>
			</form>
		</div>
	</div>
</body>
</html>
